<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web课程设计系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
    <style>
        .app-container {
            display: flex;
            min-height: 100vh;
        }
        
        .sidebar {
            width: 250px;
            background: #f8f9fa;
            padding: 20px;
            border-right: 1px solid #dee2e6;
        }

        .content-area {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
        }

        .card-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }

        .back-to-top {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: #6c757d;
            border: none;
            border-radius: 50%;
            padding: 10px;
            cursor: pointer;
            transition: opacity 0.3s;
            opacity: 0;
        }

        .back-to-top.show {
            opacity: 1;
        }
    </style>
</head>
<body>
    <header class="bg-light p-3 mb-4 border-bottom">
        <div class="container d-flex justify-content-between align-items-center">
            <h1 class="h4 mb-0">Web课程设计系统</h1>
            <nav class="nav">
                <a href="#" class="nav-link px-2" id="logoutBtn">退出登录</a>
                <span class="nav-link px-2" id="user-info">欢迎，访客</span>
            </nav>
        </div>
    </header>

    <div class="app-container">
        <aside class="sidebar bg-white shadow-sm">
            <nav class="nav flex-column">
                <a href="http://127.0.0.1:5500/pages/home.html" class="nav-link active" data-page="home">
                    <i class="bi bi-house me-2"></i>首页
                </a>
                <a href="http://127.0.0.1:5500/pages/content.html" class="nav-link" data-page="content">
                    <i class="bi bi-card-list me-2"></i>内容展示
                </a>
                <a href="http://127.0.0.1:5500/pages/chart.html" class="nav-link" data-page="chart">
                    <i class="bi bi-graph-up me-2"></i>数据可视化
                </a>
                <a href="http://127.0.0.1:5500/pages/data.html" class="nav-link" data-page="data">
                    <i class="bi bi-file-earmark me-2"></i>数据管理
                </a>
                <a href="http://127.0.0.1:5500/pages/user.html" class="nav-link" data-page="user">
                    <i class="bi bi-person me-2"></i>用户管理
                </a>
            </nav>
        </aside>

        <main class="content-area" id="content-area"></main>
    </div>

    <footer class="bg-light text-center py-3 mt-4">
        <div class="container">
            <p class="mb-2">© 2024 Web课程设计系统</p>
            <div class="d-flex justify-content-center gap-3 mb-2">
                <a href="#" class="text-decoration-none">联系我们</a>
                <a href="#" class="text-decoration-none">隐私政策</a>
                <a href="#" class="text-decoration-none">帮助中心</a>
            </div>
            <button class="btn btn-link back-to-top" onclick="window.scrollTo({top:0, behavior:'smooth'})">
                <i class="bi bi-arrow-up-circle"></i>
            </button>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/plotly@5.16.1/plotly.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="scripts/app.js"></script>
</body>
</html>
